<!-- home -->
<template>
  <page-view :full="true">
      <!-- <top-bar></top-bar> -->
      <page-content class="product">
        <div class="top">
          <div class="title">产品中心</div>
          <van-skeleton :row="2" :loading="initLoading">
            <div class="type-list">
              <div 
                @click="switchType(item)"  
                v-for="(item, index) in typeList" 
                :key="index" 
                class="type" 
                :class="{active: type == item.category_id}">{{item.category_name}}</div>
            </div>
            <div ref="deploy" class="deploy" v-if="subTypes.length">
              <div class="item" 
                v-for="(item, index) in subTypes" :key="index"
                @click="switchDeploy(item, index)" >{{item.category_name}}</div>
              <div class="active-bg" :style="{left: deployIndex * deployWidth + 'px'}"></div>
            </div>
          </van-skeleton>
        </div>
        <div class="config-list" :class="{simple: !subTypes.length}">
          <van-pull-refresh
            class="refresh-box"
            v-model="isLoading"
            success-text="刷新成功"
            @refresh="onRefresh"
          >
            <div class="config-item" @click="goBay(item)" 
              v-for="(item, index) in list" :key="index"
            >
              <div class="bw">
                <div class="info">
                  <div class="name">{{item.name}}</div>
                  <div>
                    <span>剩余份数</span>
                    <span class="inventory">{{item.surplus}}份</span>
                  </div>
                </div>
                <div class="labels">
                  <div class="type" v-for="(label, j) in item.label" :key="j">{{label}}</div>
                </div>
              </div>
              <div class="residue">
                <div class="value" :style="{width: (item.surplus/item.stock)*100 +'%'}"></div>
              </div>
              <div class="bw">
                <span>产品售价</span>
                <span>产品周期</span>
              </div>
              <div class="bw market">
                <span class="price">{{item.price}}</span>
                <span class="cycle">{{item.property_right_cycle}}天</span>
              </div>
              <div class="bw curb-sales">
                <span>上架期</span>
                <span>{{item.shelf_period}}天</span>
              </div>
            </div>
            <page-empty v-if="!list.length"></page-empty>
          </van-pull-refresh>
        </div>
      </page-content>
  </page-view>
</template>
<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import PageEmpty from '@/components/Empty';
import service from '@/utils/request';

export default {
  components: { 
    TopBar, 
    PageView, 
    PageContent,
    PageEmpty },
  name: 'home',
  data() {
    return {
      typeList: [],
      subTypes: [],

      deployIndex: 0,
      deployWidth: 0,

      list: [],
      total: 0,
      page: 1,

      title: '',
      deploy: 0,
      type: 0,
      initLoading: true,
      isLoading: false
    }
  },
  created(){
    this.category_id = this.$route.params.id;
  },
  unmounted(){

  },
  destroyed(){
  },
  mounted() {
    this.type = this.$route.params.type;
    this.deploy = this.$route.params.deploy;

    // 初始化数据
    this.deployWidth = window.innerWidth*0.8 / 3;
    this.init();
  },
  activated(){
    if(this.type != this.$route.params.type){
      this.type = this.$route.params.type;
      this.initType();
      this.getData();
    }
  },
  methods: {
    init(){
      this.initLoading = true;
      this.getTypeData().then(e=>{
        return this.getData(true);
      }).then(e=>{
        this.initLoading = false;
      })
    },
    onRefresh(){
      this.isLoading = true;
      this.page = 1;
      this.getData(true).then(e=>{
        this.isLoading = false;
      });
    },
    initType(){
      if(this.typeList.length){
        let tempType = this.typeList[0];
        if(this.type){
          let find = this.typeList.find(e => e.category_id == this.type);
          if(find){
            tempType = find;
          }
        }
        let subList = tempType.children || [];
        let tempSub
        if(this.deploy){
          tempSub = subList.find((e, i) => {
            if(e.category_id == this.deploy){
              this.deployIndex = i;
              return true;
            }
            return false;
          })
        }else{
          tempSub = subList[0];
          this.deployIndex = 0;
        }

        this.subTypes = subList;
        this.type = tempType.category_id;

        if(tempSub){
          this.deploy = tempSub.category_id;
        }else if(this.subTypes.length){
          this.deploy = this.subTypes[0].category_id
        }
      }
    },
    getTypeData(){
      return service.post('/apiGetClassify.do', {
        position: 'other'
      }, {
        hideloading: true
      }).then(response => {
        this.typeList = response.data;
        this.initType();
      })
    },
    getData(hideloading){
      let category_id = this.deploy || this.type;
      // 获取列表
      return service.post('/apiGetProduct.do', {
        page: this.page,
        limit: 50,
        category_id
      }, {
        hideloading
      }).then(res => {
        this.total = res.data.total
        this.list = res.data.rows;
      })
    },
    switchType(typeItem){
      this.type = typeItem.category_id;
      this.subTypes = typeItem.children || [];
      if(this.subTypes.length){
        this.deploy = this.subTypes[0].category_id;
      }else{
        this.deploy = 0;
      }
      this.page = 1;
      this.getData(false)
    },
    switchDeploy(deployItem, index){
      this.deployIndex = index;
      this.deploy = deployItem.category_id;
      this.page = 1;
      this.getData(false);
    },
    goBay (product) {
      this.$router.push({ 
        name: 'ProductDetail',
        params: {
          id: product.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .product{
    position: relative;
    display: flex;
    flex-flow: column;
  }
  .top{
    padding: 25px 0 20px;
    height: 200px;
    background-color: #585DF9;
    box-sizing: border-box;
    .title{
      padding: 0 20px;
      margin-bottom: 8px;
      font-size: 20px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 45px;
    }
    .type-list{
      display: flex;
      padding: 0 20px 10px;
      margin-bottom: 5px;
      overflow: auto;
      .type{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        min-width: 85px;
        height: 34px;
        border-radius: 6px;
        border: 2px solid #FFFFFF;
        font-size: 16px;
        text-align: center;
        color: #FFFFFF;
        &.active{
          position: relative;
          background-color: #fff;
          color: #585DF9;
          &::before{
            content: "";
            position: absolute;
            bottom: -10px;
            left: 18px;
            border-top: 8px solid #fff;
            border-right: 4px solid transparent;
            border-bottom: 0 solid transparent;
            border-left: 6px solid transparent;
          }
        }
        &:last-of-type{
          margin: 0;
        }
      }
    }
    .deploy{
      position: relative;
      display: flex;
      align-items: center;
      margin: 0 8vw;
      height: 38px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.3);
      overflow: auto;
      .item{
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        border: 3px solid transparent;
        min-width: calc(84vw / 3);
        height: 38px;
        line-height: 38px;
        border-radius: 20px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        z-index: 1;
      }
      .active-bg{
        box-sizing: border-box;
        position: absolute;
        left: 0;
        width: calc(84vw / 3);
        border: 3px solid rgba(255, 255, 255, 0.3);
        height: 38px;
        background: #585DF9;
        border-radius: 20px;
        transition: left 0.15s;
        &.active-0{
          left: 3px;
        }
        &.active-1{
          left: calc(33.33%);
        }
        &.active-2{
          left: calc(66.66% - 3px);
        }
      }
    }
  }
  .config-list{
    .refresh-box{
      min-height: 100%;
    }
    &.simple{
      top: 140px;
    }
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px 20px;
    background: #F2F1F8;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 1;
    overflow: auto;
    transition: top .25s;
    .config-item{
      margin-top: 10px;
      padding: 15px 10px;
      border-radius: 10px;
      background-color: #fff;
      .info{
        .name{
          color: #3D3E54;
          font-size: 14px;
          line-height: 20px;
        }
        span{
          line-height: 14px;
          &.inventory{
            margin-left: 10px;
            color: #3D3E54;
          }
        }
      }
      .labels{
        display: flex;
        max-width: 160px;
        flex-wrap: wrap;
        overflow: hidden;
        justify-content: flex-end;
        .type{
          padding: 0 8px;
          margin: 0 0 1px 1px;
          height: 20px;
          max-width: 160px;
          line-height: 21px;
          font-size: 10px;
          font-weight: 400;
          text-align: center;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #FFFFFF;
          background: #FF8445;
          border-radius: 10px;
          overflow: hidden;
        }
      }
      .residue{
        position: relative;
        margin: 8px 0;
        height: 3px;
        background: #F2F1F8;
        border-radius: 2px;
        .value{
          position: absolute;
          top: 0;
          left: 0;
          height: 3px;
          background: #FF8445;
          border-radius: 2px;
        }
      }
      .market{
        display: flex;
        align-items: center;
        height: 36px;
        margin-bottom: 5px;
      }
      .bw{
        display: flex;
        justify-content: space-between;
        span{
          font-size: 10px;
          color: #7A7886;
          &.price{
            font-size: 20px;
            line-height: 28px;
            font-weight: 600;
            color: #585DF9;
          }
          &.cycle{
            font-size: 12px;
            color: #3D3E54;
            font-weight: 500;
            line-height: 17px;
          }
        }
        &.curb-sales{
          display: flex;
          align-items: center;
          height: 25px;
          padding: 0 8px;
          background: #F2F1F8;
          border-radius: 3px;
        }
      }
    }
  }
</style>
